
import React, { useState } from 'react';
import "./index.scss";
import CustomerTabs from '../customerTabs';
import { Avatar, Badge, Flex, List } from 'antd';
import { useDispatch, useSelector } from 'react-redux';

const DemoList = (props: any) => {
    const { count } = props;
    const data = [
        {
            title: 'Ant Design Title 1',
        },
        {
            title: 'Ant Design Title 2',
        },
        {
            title: 'Ant Design Title 3',
        },
        {
            title: 'Ant Design Title 4',
        },
        {
            title: 'Ant Design Title 5',
        }
    ];

    return (
        <List
            itemLayout="horizontal"
            dataSource={data.filter((_, index) => index < count)}
            renderItem={(item, index) => (
                <List.Item>
                    <List.Item.Meta
                        style={{ cursor: "pointer" }}
                        avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                        title={<a href="javascript:;">{item.title}</a>}
                        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                    />
                </List.Item>
            )}
        />
    )
}


const MessagePop: React.FC = () => {
    const tabs = [{
        key: "1",
        title: <Flex align='self-end'>通知<div style={{ marginLeft: "10px" }}><Badge count={5} color="#faad14" /></div></Flex>,
        content: <DemoList count={5} type={1} />,
    }, {
        key: "2",
        title: <Flex align='self-end'>消息<div style={{ marginLeft: "10px" }}><Badge count={2} color="#1677ff" /></div></Flex>,
        content: <DemoList count={2} type={2} />,
    }, {
        key: "3",
        title: <Flex align='self-end'>待办<div style={{ marginLeft: "10px" }}><Badge count={1} color="##ff4d4f" /></div></Flex>,
        content: <DemoList count={1} type={3} />,
    }]

    const [activeKey, setActiveKey] = React.useState("1");

    return (
        <CustomerTabs animation={true} defaultActiveKey={1} activeKey={activeKey} tabsList={tabs} tabWidth={"120px"} onChangeTab={(e) => setActiveKey(e)} />
    )
}

export default MessagePop;